<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>简单多边形</title>
  </head>
  <script
    charset="utf-8"
    src="https://map.qq.com/api/gljs?v=1.exp&key=M2YBZ-UZERF-PR4JH-JNQJ4-LQLI5-KNFVI"
  ></script>
  <style>
    html,
    body {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    #mapContainer {
      width: 100%;
      height: 100%;
    }
  </style>

  <body onload="initMap()">
    <div id="mapContainer"></div>
  </body>
</html>
<script src="./geometry.js"></script>
<script>
  function initMap() {
    var center = new TMap.LatLng(30.395506440000077, 114.90119051500005); //设置中心点坐标
    //初始化地图
    var map = new TMap.Map('mapContainer', {
      center: center,
      zoom: 14,
    });
    map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
    map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);

    geometries.forEach((g) => {
      const paths = g.paths.map((p) => {
        return new TMap.LatLng(p[0], p[1]);
      });
      g.paths = paths;
    });

    //初始化polygon
    var polygon = new TMap.MultiPolygon({
      id: 'polygon-layer', //图层id
      map: map, //显示多边形图层的底图
      styles: {
        //多边形的相关样式
        polygon: new TMap.PolygonStyle({
          color: '#3777FF',
          // color: 'rgb(241, 106, 72)', //面填充色
          showBorder: false, //是否显示拔起面的边线
          // borderColor: 'rgb(209, 172, 6)', //边线颜色,
          borderColor: '#00FFFF',
        }),
      },
      geometries: geometries,
    });
    navigator.geolocation.getCurrentPosition((position) => {
      console.log(position);
    });
  }
</script>
